<template>
	<view>
		<view>
			<uni-nav-bar left-icon="back" left-text="返回" right-text="注册" title="用户登录" @clickRight="registerBtn" @clickLeft="backBtn"></uni-nav-bar>
		</view>
		<view>
			<view class="content" style="margin-top: 150upx;">
				<image src="../../static/icon/影院标志.jpg" mode="" style="width: 200upx;height: 100upx;"></image>
			</view>
			<view style="margin-top:150upx;" class="content">
				<view style="border-bottom: 2upx #dedede solid;width: 70%;">
					<input v-model="mobilePhone" type="number" focus maxlength="11" placeholder="请输入手机号"/>
				</view>
			</view>
			<view style="margin-top:50upx;" class="content">
				<view style="border-bottom: 2upx #dedede solid;width: 70%;">
					<input v-model="userPassword" type="text" focus placeholder="请输入密码"/>
				</view>
			</view>
			<view style="margin-top:50upx;" >
				<view style="border-bottom: 2upx #dedede solid;width: 50%;position:relative;left: 15%;">
					<input v-model="kaptchaCode" type="text" maxlength="4" focus placeholder="请输入验证码"/>
				</view>
			</view>
			<view style="position: relative;left: 500upx;bottom: 97upx;">
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;" 
				v-show="showImage==1"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==2"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==3"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==4"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==5"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==6"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==7"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==8"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==9"   @click="changeKaptchaCode" ></image>
				<image src="/api/tato/kaptcha" mode="" style="width: 200upx;height: 95upx;"
				v-show="showImage==10"   @click="changeKaptchaCode" ></image>
			</view>
			<view style="margin-top:50upx;" class="content">
				<view style="width: 50%;">
					<button type="primary" @click="loginBtn">登陆</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				doubanId:"",
				mobilePhone:"",
				userPassword:"",
				kaptchaCode:"",
				showImage:1,
				//kaptchaCodeImageSrc:"/api/tato/kaptcha",
				phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
			}
		},
		methods: {
			loginBtn(){
				if(!this.phoneReg.test(this.mobilePhone)){
					uni.showToast({
					    title: '这不是手机号',
					    duration: 2000,
						icon:"none"
					});
				}else if(this.userPassword.trim()<1){
					uni.showToast({
					    title: '密码不能为空',
					    duration: 2000,
						icon:"none"
					});
				}else if(this.kaptchaCode.trim()<1){
					uni.showToast({
					    title: '请输入验证码',
					    duration: 2000,
						icon:"none"
					});
				}else{
					//将验证码发送给后端根据结果再来判断
					uni.request({
						url:"/api/tato/loginKaptchaCode",
						data:{
							"kaptchaCode":this.kaptchaCode
						},
						success:(res)=> {
							if(res.data){
								//将用户名密码发给后端效验
								uni.request({
									url:"/api/tato/loginPhoneAndPassword",
									data:{
										"mobilePhone":this.mobilePhone,
										"userPassword":this.userPassword
									},
									success: (res) => {
										if(res.data){
											//根据是否有doubanId进行不同的跳转
											uni.showToast({
											    title: '登陆成功',
											    duration: 2000,
												icon:"none"
											});
											uni.setStorage({
												key:"generalUser",
												data:res.data
											});
											setTimeout(function(){
												if(this.doubanId==undefined){
														uni.switchTab({
															url: '../index/index'
														});
													}else{
														//调到选着电影院的页面
													}
											},2000)
										}else{
											uni.showToast({
											    title: '用户名或密码错误',
											    duration: 2000,
												icon:"none"
											});
										}
									}
								})
							}else{
								uni.showToast({
								    title: '验证码错误',
								    duration: 2000,
									icon:"none"
								});
							}
						}
					})
				}
			},
			changeKaptchaCode(){
				if(this.showImage<10){
					this.showImage+=1
				}
			},
			registerBtn(){
				uni.navigateTo({
					url:"../register_page/register_page"
				})
			},
			backBtn(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//console.log(option.doubanId)
			//如果传过来的option.doubanId是undefined说明用户是直接来到这个登陆页面
			//如果不是undefined说明是进行了选着电影来到的这个页面
			this.doubanId=option.doubanId
		},
		components:{
			uniNavBar
		}
	}
</script>

<style>
 .content{
	 display: flex;
	 justify-content: center;
 }
</style>
